<template>
    <div id="main"></div>
</template>
<script setup lang="ts">
import { onBeforeUnmount, onMounted } from 'vue';
import * as zrender from 'zrender';
import { ZRenderType } from 'zrender';
let zr: ZRenderType;
const height: any = ref(0);
const weight: any = ref(0);
const disLeft: any = ref(0);
const disTop: any = ref(0);
const disBottom: any = ref(0);
const disRight: any = ref(0);
const zrColGroup: any = ref(null);
const zrBGGroup: any = ref(null);
const zrAxisGroup: any = ref(null);
onMounted(() => {
    init();
});
// init
const init = (option?: any, data?: any) => {
    zr = zrender.init(document.getElementById('main'));
    height.value = zr.getHeight();
    weight.value = zr.getWidth();
    disLeft.value = 0.15 * weight.value;
    disTop.value = 0.1 * height.value;
    disBottom.value = 0.1 * height.value;
    disRight.value = 0.07 * weight.value;
    //Group 是一个容器
    zrBGGroup.value = new zrender.Group();
    zrBGGroup.value.position = [0, 0];
    zr.add(zrBGGroup.value);
    //Group 是一个容器
    zrColGroup.value = new zrender.Group();
    zrColGroup.value.position = [0, 0];
    zr.add(zrColGroup.value);
    // Group 是一个容器 与X轴平行的线
    zrAxisGroup.value = new zrender.Group();
    zrAxisGroup.value.position = [0, 0];
    zr.add(zrAxisGroup.value);
    drawBG();
    drawAxis();
};
//draw background
const drawBG = () => {
    let xData = [
        [-324, 0],
        [0, 205],
        [205, 410],
        [410, 615],
        [615, 820],
        [820, 1025],
        [0, 155],
        [155, 310],
        // [0, 144],
        // [144, 286],
        // [0, 144],
        // [144, 286],
    ];
    let xAxis = [
        { start: -324, end: 0 },
        { start: 0, end: 205 },
        { start: 205, end: 410 },
        { start: 410, end: 615 },
        { start: 615, end: 820 },
        { start: 820, end: 1025 },
        { start: 0, end: 155 },
        { start: 155, end: 310 },
        { start: 0, end: 144 },
        { start: 144, end: 286 },
        { start: 286, end: 410 },
        { start: 410, end: 610 },
    ];
    let xText = [
        '-324',
        '0',
        '205',
        '410',
        '615',
        '820',
        '0',
        '155',
        '310',
        '0',
        '144',
        '286',
        '0',
        '144',
        '286',
        '0',
        '144',
        '286',
    ];
    let splitLen = xData.length;
    var tagTexts = [
        'ORE BERTH',
        'BERTH 1',
        'BERTH 2',
        'BERTH 3',
        'BERTH 4',
        'BERTH 5',
        'BERTH 6',
        'BERTH 7',
        'BERTH 8',
        'BERTH 9',
        'BERTH 10',
        'BERTH 11',
    ];
    let xMin = 759;
    let wRadio = (weight.value - 60 - disRight.value) / (4 * xMin);
    let xLenValue = 4 * xMin;
    let yMin = (height.value - disTop.value - disBottom.value) / 4;
    // zrBGGroup.value.add(
    //     new zrender.Rect({
    //         shape: {
    //             width: weight.value,
    //             height: height.value,
    //         },
    //         style: { fill: '#e2f3f8' },
    //     }),
    // );
    // const roundRect = new zrender.Rect({
    //     shape: {
    //         width: 0.98 * weight.value,
    //         height: 0.99 * height.value,
    //     },
    //     style: {
    //         stroke: '#C0D0E0',
    //         fill: '#fff',
    //     },
    //     // position: [0.01 * weight.value, 0.005 * height.value],
    // });
    // zrBGGroup.value.add(roundRect);
    // x轴
    var xline = new zrender.Line({
        shape: {
            x1: 0,
            y1: 0,
            x2: wRadio * (4 * xMin),
            y2: 0,
        },
        style: { stroke: '#000' },
        position: [60, height.value - disBottom.value],
    });
    zrBGGroup.value.add(xline);
    //
    for (let i = 0; i < xData.length; i++) {
        var smline = new zrender.Line({
            shape: {
                x1: 0,
                y1: -0.02 * height.value,
                x2: 0,
                y2: 0,
            },
            style: {
                stroke: '#000',
            },
            position: [
                i == 0 ? 60 + xData[i][0] : 60 + xData[i][1],
                height.value - disBottom.value,
            ],
        });
        var smText = new zrender.Text({
            style: {
                stroke: '#434348',
                // text: `${794 + i * xMin}`,
                text: xText[i],
                fontSize: '11',
                align: 'center',
            },
            position: [
                // 60 + wRadio * (i * xMin),
                i == 0 ? 60 + xData[i][0] : 60 + xData[i][1],
                height.value - disBottom.value - 0.04 * height.value,
            ],
        });

        zrBGGroup.value.add(smline);
        zrBGGroup.value.add(smText);

        for (let i = 0; i < 4; i++) {
            const tagBox = new zrender.Rect({
                shape: {
                    x: 0,
                    y: 0,
                    width: 60 + wRadio * (i + 1 * xMin),
                    height: 30,
                },
                style: {
                    fill: '#fff',
                    stroke: '#ccc',
                    lineWidth: 1,
                },
                position: [
                    60 + wRadio * (i * xMin),
                    height.value - disBottom.value + 0.02 * height.value,
                ],
            });
            // 泊位中文
            var tagText = new zrender.Text({
                style: {
                    stroke: '#434348',
                    text: `${tagTexts[i]}`,
                    fontSize: '11',
                    align: 'center',
                },
                z: 1,
                position: [
                    60 + wRadio * (i * xMin) + 200,
                    height.value - disBottom.value + 0.04 * height.value,
                ],
            });
            zrBGGroup.value.add(tagBox);
            zrBGGroup.value.add(tagText);
        }
    }
    // 左侧y轴
    zrBGGroup.value.add(
        new zrender.Line({
            shape: {
                y2: height.value - disTop.value - disBottom.value,
            },
            style: { stroke: '#000' },
            position: [60, disTop.value],
        }),
    );
    zrBGGroup.value.add(
        new zrender.Line({
            shape: {
                y2: height.value - disTop.value - disBottom.value,
            },
            style: { stroke: '#000' },
            position: [weight.value - disRight.value, disTop.value],
        }),
    );
};
//draw draw x axis
const drawAxis = () => {
    var yMin = (height.value - disTop.value - disBottom.value) / 4;
    for (let i = 0; i < 4; i++) {
        var yline = new zrender.Line({
            shape: {
                x2: weight.value - 60 - disRight.value,
            },
            style: {
                stroke: '#ccc',
            },
            position: [60, disTop.value + yMin * i],
        });
        zrAxisGroup.value.add(yline);
    }
};
onBeforeUnmount(() => {
    zr.dispose();
});
</script>
<style lang="less" scoped>
#main {
    width: 100%;
    height: 500px;
}
</style>
